<script setup lang="ts">
import { onMounted, ref } from 'vue'
import type { Model } from '@/model'
import { useUserStore } from '@/store/modules/user'
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
const { modelList, currentModel } = storeToRefs(userStore)

onMounted(() => {
  console.log(modelList.value)
})

defineOptions({
  name: 'ModelSelector'
})

// 定义事件
const emit = defineEmits<{
  (e: 'select', model: string): void
  (e: 'close'): void
}>()

// 选择模型
const selectModel = (model: Model) => {
  currentModel.value = model
  emit('select', model.id.toString())
}
</script>

<template>
  <div class="model-selector">
    <div class="fixed inset-0 bg-transparent" @click="emit('close')"></div>
    <div class="absolute top-16 right-4 w-72 bg-white rounded-lg bd-1 overflow-hidden">
      <div class="p-2">
        <div class="text-sm text-gray-500 font-medium p-2">模型</div>
      </div>

      <div class="pb-2 px-2">
        <div
          v-for="model in modelList"
          :key="model.id"
          class="px-3 py-2 flex items-center hover:bg-gray-50 cursor-pointer"
          @click="selectModel(model)"
        >
          <div class="flex-1 min-w-0">
            <div class="text-sm font-medium">{{ model.name }}</div>
            <div class="text-xs text-gray-500 truncate">{{ model.description }}</div>
          </div>
          <div v-if="model.id === currentModel.id" class="ml-2 text-blue-500">
            <i class="iconfont icon-ios-checkmark text-lg"></i>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.model-selector {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
</style>
